<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="5">
          <el-form-item label="订单编号">
            <el-input v-model="form.id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="用户姓名">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="证件号码">
            <el-input v-model="form.paper"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="手机号">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="派发类型">
              <el-select v-model="form.myOrder" placeholder="请选择">
               <el-option
                v-for="item in paifaType"
                :key="item.key"
                :label="item.name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="用户地区">
            <user-address ref="AddAddress"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="所属企业">
            <el-select v-model="form.companyId" placeholder="请选择">
              <el-option key value label="全部">全部</el-option>
              <el-option
                v-for="item in company"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="订单状态">
            <el-row>
              <el-col :span="12">
                <el-select
                  style="width:90%;"
                  @change="getState"
                  v-model="form.state"
                  placeholder="请选择"
                >
                  <el-option key value label="全部">全部</el-option>
                  <el-option
                    v-for="item in stateList"
                    :key="item.dKey"
                    :label="item.dValue"
                    :value="item.dKey"
                  />
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select v-model="twoState" placeholder="请选择">
                  <el-option key value label="全部">全部</el-option>
                  <el-option
                    v-for="item in childStateList"
                    :key="item.dKey"
                    :label="item.dValue"
                    :value="item.dKey"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" class="btn" @click="search">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-main>
      <el-table :data="tableList">
        <el-table-column prop="id" align="center" label="订单号"></el-table-column>
        <el-table-column prop="userName" align="center" label="用户姓名"></el-table-column>
        <el-table-column prop="mobile" align="center" label="预约手机号"></el-table-column>
        <el-table-column align="center" label="预约地区">
          <template
            slot-scope="scope"
          >{{scope.row.wantProvince}}{{scope.row.wantCity}}{{scope.row.wantCountry}}</template>
        </el-table-column>
        <el-table-column prop="hospitalName" align="center" label="预约医院"></el-table-column>
        <el-table-column prop="groundPersonName" align="center" label="接单人"></el-table-column>
        <el-table-column prop="companyName" align="center" label="所属企业"></el-table-column>
        <el-table-column prop="remark" align="center" label="派单备注"></el-table-column>
        <el-table-column prop="stateValue" align="center" label="状态"></el-table-column>
        <el-table-column prop="childStateValue" align="center" label="子状态"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button
              @click="detail(scope.row.id,scope.row.stateValue,scope.row.childStateValue,scope.row.remark,scope.row.deleteFlag,scope.row.reason,scope.row.changePerson)"
              type="text"
              size="small"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demonstration-box">
        <!-- <span class="demonstration">显示总数</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageParams.size"
          layout="total, prev, pager, next"
          :total="pageParams.totalCount"
        ></el-pagination>
      </div>
    </el-main>
  </div>
</template>
<script>
const queryString = require("querystring");
import UserAddress from "components/address";
import page from "data/page";
export default {
  mixins: [page],
  data() {
    return {
      tableList: [],
      company: [],
      stateList: [],
      childStateList: [],
      currentPage: 1,
      twoState: "",
      form: {
        myOrder:false,
        id: "",
        userName: "",
        mobile: "",
        state: "",
        childState: "",
        province: "",
        city: "",
        country: "",
        companyId: "",
        paper: ""
      },
      paifaType:[
        {
          name:'全部订单',
          key:false
        },
        {
          name:'我派发的',
          key:true
        }
      ]
    };
  },
  created() {
    this.getCompany();
    this.getDict("14");
    this.getDict("15");
  },
  mounted() {
    this.search();
  },
  components: {
    UserAddress
  },
  methods: {
    getCompany() {
      this.axios
        .get("/company?page=0&size=1000")
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            this.company = res.data.data.list;
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    getDict(id) {
      this.axios
        .get("/dict?groupId=" + id)
        .then(res => {
          if (res.data.code == 200) {
            if (id == "14") {
              this.stateList = res.data.data;
            } else if (id == "15") {
              this.childStateList = res.data.data;
            }
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    getState() {
      this.twoState = "";
      switch (this.form.state) {
        case "1": //未派单
          this.childStateList = [];
          break;
        case "2": //已派单
          this.childStateList = [
            {
              dKey: "1",
              dValue: "未转单"
            },
            {
              dKey: "2",
              dValue: "已转单"
            }
          ];
          break;
        case "3": //已接单
          this.childStateList = [
            {
              dKey: "3",
              dValue: "未沟通"
            },
            {
              dKey: "4",
              dValue: "已沟通"
            }
          ];
          break;
        case "4": //资料采集
          this.childStateList = [
            {
              dKey: "5",
              dValue: "未检查协议"
            },
            {
              dKey: "6",
              dValue: "已检查协议"
            },
            {
              dKey: "7",
              dValue: "未签署文件"
            },
            {
              dKey: "8",
              dValue: "已签署文件"
            }
          ];
          break;
        case "5": //同意垫付
          this.childStateList = [
            {
              dKey: "9",
              dValue: "确认金额"
            },
            {
              dKey: "10",
              dValue: "已垫付"
            },
            {
              dKey: "11",
              dValue: "已上传付款凭证"
            }
          ];
          break;
        case "6": //拒绝垫付
          this.childStateList = [];
          break;
        case "7": //已出院
          this.childStateList = [
            {
              dKey: "12",
              dValue: "出院凭证未上传"
            },
            {
              dKey: "13",
              dValue: "出院凭证已上传"
            },
            {
              dKey: "14",
              dValue: "无追缴"
            },
            {
              dKey: "15",
              dValue: "未追缴"
            },
            {
              dKey: "16",
              dValue: "已追缴"
            }
          ];
          break;
        case "8": //已完成
          this.childStateList = [
            {
              dKey: "17",
              dValue: "未理赔"
            },
            {
              dKey: "18",
              dValue: "已理赔"
            },
            {
              dKey: "19",
              dValue: "已关闭"
            }
          ];
          break;
      }
    },
    search() {
      const tableParams = {
        size: 20,
        page: this.currentPage - 1
      };
      let addressParams = this.$refs.AddAddress.getData();
      this.form.province = addressParams.province;
      this.form.city = addressParams.city;
      this.form.country = addressParams.country;
      this.form = this.lodash.assign({}, this.form, tableParams);
      if (this.twoState == "19") {
        this.form.childState = "";
        this.form["deleteFlag"] = true;
      } else {
        this.form.childState = this.twoState;
        delete this.form.deleteFlag;
      }
      this.axios
        .get("/productOrder?" + queryString.stringify(this.form))
        .then(res => {
          if (res.data.code == 200) {
            this.tableList = res.data.data.list;
            this.setPage(res.data.data);
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    detail(
      id,
      stateValue,
      childStateValue,
      remark,
      deleteFlag,
      reason,
      changePerson
    ) {
      this.$router.push({
        path: "orderMain",
        query: {
          id: id,
          stateValue: stateValue,
          childStateValue: childStateValue,
          remark: remark,
          deleteFlag: deleteFlag,
          reason: reason,
          changePerson: changePerson
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.btn {
  margin-left: 20px;
}
</style>

